<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册会员 - M3U8播放器</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #1890ff;
            --primary-hover: #40a9ff;
            --error-color: #ff4d4f;
            --bg-color: #f0f2f5;
            --card-color: #ffffff;
            --text-color: #333;
            --text-secondary: #666;
            --border-color: #d9d9d9;
            --shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
        }
        
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
        }
        
        .register-container {
            max-width: 500px;
            margin: 50px auto;
            padding: 0 20px;
        }
        
        .register-card {
            background: var(--card-color);
            border-radius: 12px;
            box-shadow: var(--shadow);
            padding: 40px;
            animation: fadeInUp 0.5s;
        }
        
        .register-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .register-header h1 {
            font-size: 24px;
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .register-header h1 i {
            margin-right: 12px;
            font-size: 28px;
        }
        
        .register-form .form-group {
            margin-bottom: 20px;
        }
        
        .register-form label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: var(--text-color);
        }
        
        .register-form input {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            font-size: 15px;
            transition: all 0.3s;
        }
        
        .register-form input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }
        
        .register-form input.error {
            border-color: var(--error-color);
        }
        
        .error-message {
            color: var(--error-color);
            font-size: 13px;
            margin-top: 5px;
            display: none;
        }
        
        .register-button {
            width: 100%;
            padding: 14px;
            background: var(--primary-color);
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }
        
        .register-button:hover {
            background: var(--primary-hover);
        }
        
        .register-button i {
            margin-right: 8px;
        }
        
        .register-footer {
            text-align: center;
            margin-top: 20px;
            color: var(--text-secondary);
        }
        
        .register-footer a {
            color: var(--primary-color);
            text-decoration: none;
            margin-left: 5px;
        }
        
        .password-strength {
            height: 4px;
            background: #f0f0f0;
            border-radius: 2px;
            margin-top: 8px;
            overflow: hidden;
        }
        
        .password-strength-bar {
            height: 100%;
            width: 0;
            background: #ccc;
            transition: all 0.3s;
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @media (max-width: 576px) {
            .register-card {
                padding: 30px 20px;
            }
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-card">
            <div class="register-header">
                <h1>
                    <i class="fas fa-user-plus"></i>
                    注册会员账号
                </h1>
                <p>加入我们，享受更好的视频观看体验</p>
            </div>
            
            <form id="registerForm" class="register-form">
                <input type="hidden" name="__token__" value="{:token()}">
                
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" id="username" name="username" placeholder="请输入用户名 (4-20位字母、数字或下划线)" required>
                    <div id="usernameError" class="error-message"></div>
                </div>
                
                <div class="form-group">
                    <label for="email">电子邮箱</label>
                    <input type="email" id="email" name="email" placeholder="请输入有效的电子邮箱" required>
                    <div id="emailError" class="error-message"></div>
                </div>
                
                <div class="form-group">
                    <label for="password">密码</label>
                    <input type="password" id="password" name="password" placeholder="请输入密码 (至少6位字符)" required>
                    <div class="password-strength">
                        <div class="password-strength-bar" id="passwordStrength"></div>
                    </div>
                    <div id="passwordError" class="error-message"></div>
                </div>
                
                <div class="form-group">
                    <label for="confirmPassword">确认密码</label>
                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="请再次输入密码" required>
                    <div id="confirmError" class="error-message"></div>
                </div>
                
                <button type="button" id="registerBtn" class="register-button">
                    <i class="fas fa-user-plus"></i> 立即注册
                </button>
            </form>
            
            <div class="register-footer">
                已有账号？<a href="{:url('member/login')}">立即登录</a>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const usernameInput = document.getElementById('username');
            const emailInput = document.getElementById('email');
            const passwordInput = document.getElementById('password');
            const confirmInput = document.getElementById('confirmPassword');
            const registerBtn = document.getElementById('registerBtn');
            const strengthBar = document.getElementById('passwordStrength');
            
            // 密码强度检测
            passwordInput.addEventListener('input', function() {
                const password = this.value;
                let strength = 0;
                
                if (password.length >= 6) strength += 1;
                if (password.length >= 8) strength += 1;
                if (/[A-Z]/.test(password)) strength += 1;
                if (/[0-9]/.test(password)) strength += 1;
                if (/[^A-Za-z0-9]/.test(password)) strength += 1;
                
                const width = strength * 20;
                let color = '#ff4d4f'; // 弱
                if (strength >= 3) color = '#faad14'; // 中
                if (strength >= 4) color = '#52c41a'; // 强
                
                strengthBar.style.width = width + '%';
                strengthBar.style.background = color;
            });
            
            // 注册按钮点击事件
            registerBtn.addEventListener('click', function() {
                if (validateForm()) {
                    registerUser();
                }
            });
            
            // 表单验证
            function validateForm() {
                let isValid = true;
                const username = usernameInput.value.trim();
                const email = emailInput.value.trim();
                const password = passwordInput.value;
                const confirmPassword = confirmInput.value;
                
                // 验证用户名
                if (!username || username.length < 4 || username.length > 20) {
                    showError('usernameError', '用户名必须为4-20位字符');
                    usernameInput.classList.add('error');
                    isValid = false;
                } else if (!/^[a-zA-Z0-9_]+$/.test(username)) {
                    showError('usernameError', '用户名只能包含字母、数字和下划线');
                    usernameInput.classList.add('error');
                    isValid = false;
                } else {
                    hideError('usernameError');
                    usernameInput.classList.remove('error');
                }
                
                // 验证邮箱
                if (!email) {
                    showError('emailError', '请输入电子邮箱');
                    emailInput.classList.add('error');
                    isValid = false;
                } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
                    showError('emailError', '请输入有效的电子邮箱');
                    emailInput.classList.add('error');
                    isValid = false;
                } else {
                    hideError('emailError');
                    emailInput.classList.remove('error');
                }
                
                // 验证密码
                if (!password || password.length < 6) {
                    showError('passwordError', '密码至少需要6位字符');
                    passwordInput.classList.add('error');
                    isValid = false;
                } else {
                    hideError('passwordError');
                    passwordInput.classList.remove('error');
                }
                
                // 验证确认密码
                if (password !== confirmPassword) {
                    showError('confirmError', '两次输入的密码不一致');
                    confirmInput.classList.add('error');
                    isValid = false;
                } else {
                    hideError('confirmError');
                    confirmInput.classList.remove('error');
                }
                
                return isValid;
            }
            
            // 显示错误信息
            function showError(id, message) {
                const errorElement = document.getElementById(id);
                errorElement.textContent = message;
                errorElement.style.display = 'block';
            }
            
            // 隐藏错误信息
            function hideError(id) {
                document.getElementById(id).style.display = 'none';
            }
            
            // 注册用户
            function registerUser() {
                const formData = {
                    username: usernameInput.value.trim(),
                    email: emailInput.value.trim(),
                    password: passwordInput.value,
                    confirmPassword: confirmInput.value,
                    __token__: document.querySelector('input[name="__token__"]').value
                };
                
                registerBtn.disabled = true;
                registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 注册中...';
                
                fetch('{:url("member/doRegister")}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': formData.__token__
                    },
                    body: JSON.stringify(formData)
                })
                .then(response => response.json())
                .then(data => {
                    if (data.code === 200) {
                        // 注册成功
                        showSuccess('注册成功，正在跳转...');
                        setTimeout(() => {
                            window.location.href = '{:url("player/index")}';
                        }, 1500);
                    } else {
                        // 注册失败
                        showError('usernameError', data.msg || '注册失败');
                        registerBtn.disabled = false;
                        registerBtn.innerHTML = '<i class="fas fa-user-plus"></i> 立即注册';
                    }
                })
                .catch(error => {
                    showError('usernameError', '网络错误，请稍后重试');
                    registerBtn.disabled = false;
                    registerBtn.innerHTML = '<i class="fas fa-user-plus"></i> 立即注册';
                });
            }
            
            // 显示成功提示
            function showSuccess(message) {
                const successDiv = document.createElement('div');
                successDiv.className = 'success-message';
                successDiv.style.position = 'fixed';
                successDiv.style.top = '20px';
                successDiv.style.left = '50%';
                successDiv.style.transform = 'translateX(-50%)';
                successDiv.style.backgroundColor = '#52c41a';
                successDiv.style.color = 'white';
                successDiv.style.padding = '10px 20px';
                successDiv.style.borderRadius = '4px';
                successDiv.style.boxShadow = '0 3px 6px rgba(0, 0, 0, 0.1)';
                successDiv.style.zIndex = '1000';
                successDiv.style.animation = 'fadeInUp 0.3s';
                successDiv.innerHTML = `<i class="fas fa-check-circle"></i> ${message}`;
                
                document.body.appendChild(successDiv);
                
                setTimeout(() => {
                    successDiv.style.animation = 'fadeOut 0.3s';
                    setTimeout(() => {
                        document.body.removeChild(successDiv);
                    }, 300);
                }, 2000);
            }
        });
    </script>
</body>
</html>